<script setup>
import { appStockListQuery } from "@/services/cashier";
import { onLoad, onReady, onShow, onPageScroll } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
import {
  chartBusiness,
  chartCategory,
  chartProduct,
  chartPayType,
} from "@/services/index";
import { operation } from "@/utils/num.js";
const onPages = ref(0);
onPageScroll((e) => {
  console.log(e.scrollTop); // 打印当前滚动条的垂直位置
  // 你可以在这里做更多操作，比如根据滚动位置加载数据等
  onPages.value = e.scrollTop;
});
// @param op { string } 运算类型，有加减乘除（add / subtract / multiply / divide）
const userInfo = ref({});
onLoad((e) => {
  if (uni.getStorageSync("user")) {
    userInfo.value = uni.getStorageSync("user")
      ? JSON.parse(uni.getStorageSync("user"))
      : {};
    console.log(JSON.parse(uni.getStorageSync("user")));
  }
});
onReady(() => {
  // 微信小程序需要用此写法
  // datetimePickerRef.value.setFormatter(formatter);
});

// 定义 open 方法
const open = (e) => {
  // console.log('open', e)
};

// 定义 close 方法
const close = (e) => {
  // console.log('close', e)
};

onShow(() => {
  getChartBusiness();
  getChartPayType();
});

const businessDet = ref({});
const chartPayTypeList = ref([]);
const getNumCL = (one, two, type) => {
  return operation(Number(one), Number(two), 2, type);
};
const getChartBusiness = async () => {
  let data = {};
  data = {
    startTime: timevalue.value + " 00:00:00",
    endTime: timevalue.value + " 23:59:59",
  };
  data.shopId = userInfo.value.shopId;

  const res = await chartBusiness(data);
  businessDet.value = res.data;
};

const getChartPayType = async () => {
  let data = {};
  data = {
    startTime: timevalue.value + " 00:00:00",
    endTime: timevalue.value + " 23:59:59",
  };
  data.shopId = userInfo.value.shopId;
  const res = await chartPayType(data);
  chartPayTypeList.value = res.data.data;
};

// 定义 change 方法
const change = (e) => {
  // console.log('change', e)
};
const showtime = ref(false);
const datetimePickerRef = ref(null);
const timevalue = ref(Time(Date.now()));
function Time(e) {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const confirmDate = (E) => {
  timevalue.value = Time(E.value);

  showtime.value = false;
  getChartBusiness();
  getChartPayType();
};

const show = ref(false);
const value1 = ref(Date.now());

// const formatter = (type, value) => {
//   if (type === "year") {
//     return `${value}年`;
//   }
//   if (type === "month") {
//     return `${value}月`;
//   }
//   if (type === "day") {
//     return `${value}日`;
//   }
//   return value;
// };

const gopagesfun = (e) => {
  uni.navigateTo({
    url: "/pages/cashier/statistics/index",
  });
};

const goNextFun = () => {
  var time = new Date(timevalue.value).getTime(); //当前的毫秒数
  var oneDay = time - 1000 * 60 * 60 * 24; //一天的毫秒数
  timevalue.value = Time(oneDay);
  getChartBusiness();
  getChartPayType();
};
const goLastFun = () => {
  var time = new Date(timevalue.value).getTime(); //当前的毫秒数
  var oneDay = time + 1000 * 60 * 60 * 24; //一天的毫秒数
  timevalue.value = Time(oneDay);
  getChartBusiness();
  getChartPayType();
};

const tooltipContent = ref(
  "总收入=销售实收金额+会员充值金额+门店收入 \n 总支出=门店支出"
);

//无网状态
const connected = () => {
  getChartBusiness();
  getChartPayType();
};
</script>

<template>
  <view class="bg">
    <up-navbar
      :bgColor="
        onPages > 10 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0)'
      "
      @rightClick="rightClick"
      :autoBack="true"
      :safeAreaInsetTop="true"
      :fixed="true"
      :placeholder="true"
      :leftText="'返回'"
    >
      <template #right> </template>
      <template #center>
        <text
          class="text-white"
          style="
            font-weight: 500;
            font-size: 34rpx;
            color: #000000;
            line-height: 48rpx;
            text-align: center;
          "
          >营业统计</text
        ></template
      >
    </up-navbar>
    <view class="content">
      <view class="top">
        <view class="top-left" @click="goNextFun">上一天</view>
        <view class="top-center" @click="showtime = true"
          >{{ timevalue
          }}<up-icon name="calendar" color="#C9CDD4" size="48rpx"></up-icon>
        </view>
        <view class="top-right" @click="goLastFun">下一天</view>
      </view>
      <view class="content-count">
        <view class="content-count-title"
          >总收支统计
          <view class="content-right-top">
            <uni-tooltip :content="tooltipContent" placement="bottom">
              <up-icon
                name="question-circle"
                color="#86909C"
                size="40rpx"
              ></up-icon>
            </uni-tooltip>
          </view>
        </view>
        <view class="content-count-info">
          <view class="content-count-top"> 总收入 </view>
          <view class="content-count-num">
            ¥<up-count-to
              color="#F53F3F"
              :duration="500"
              :startVal="0"
              :bold="true"
              separator=","
              fontSize="48rpx"
              :endVal="businessDet.salesTotalAmount || 0"
              :decimals="2"
            ></up-count-to>
          </view>
          <view class="content-count-list">
            <view class="content-count-item">
              <view class="one">销售利润</view>
              <view class="two"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.grossProfit || 0"
                  :decimals="2"
                ></up-count-to>
              </view>
            </view>
            <view class="content-count-item">
              <view class="one">会员充值</view>
              <view class="two"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.hy || 0"
                  :decimals="2"
                ></up-count-to
              ></view>
            </view>
            <view class="content-count-item">
              <view class="one">门店收入</view>
              <view class="two"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.sou || 0"
                  :decimals="2"
                ></up-count-to
              ></view>
            </view>
          </view>
          <view class="content-count-cont">
            总支出 <text class="zc-text">0</text>
          </view>
        </view>
      </view>

      <view class="content-info">
        <view class="content-info-title" @click="gopagesfun"
          >销售统计
          <up-icon
            name="arrow-right"
            color="#8C8C8C"
            size="32rpx"
            style="margin-top: 0rpx"
          ></up-icon
        ></view>
        <view class="content-info-content">
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>销售单数</view>
              <text>
                <up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.orderCount || 0"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>销售总额</view>
              <text
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.salesTotalAmount || 0"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>优惠总额</view>
              <text>
                ¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="
                    getNumCL(
                      businessDet.salesTotalAmount,
                      businessDet.salesTotal,
                      'subtract'
                    ) || 0
                  "
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>实收总额</view>
              <text
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.salesTotal"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>退款单数</view>
              <text
                ><up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.refundCount"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>退款总额</view>
              <text
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="businessDet.refundTotal"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
        </view>
      </view>
      <view class="content-info">
        <view class="content-info-title">会员统计</view>
        <view class="content-info-content">
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>新增会员</view>
              <text
                ><up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="0"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>会员充值</view>
              <text
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="0"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
        </view>
      </view>
      <view class="content-info" v-if="chartPayTypeList.length > 0">
        <view class="content-info-title">支付统计</view>
        <view class="content-info-content">
          <view
            class="content-info-content-zc"
            v-for="(item, index) in chartPayTypeList"
            :key="index"
          >
            <view class="content-info-content-item">
              <view>{{ item.payTypeName }}</view>
              <text
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="item.payAmount || 0"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
        </view>
      </view>
      <view class="content-info">
        <view class="content-info-title">门店收支</view>
        <view class="content-info-content">
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>收入</view>
              <text class="red"
                >¥<up-count-to
                  color="#f53f3f"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="0"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
          <view class="content-info-content-zc">
            <view class="content-info-content-item">
              <view>支出</view>
              <text class="green"
                >¥<up-count-to
                  color="#00b42a"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="32rpx"
                  :endVal="0"
                  :decimals="2"
                ></up-count-to
              ></text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <up-datetime-picker
    class="top-center"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
